<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'App',
    watch: {
        $route (to, from) {
            let selectName = ''
            const toName = to.name
            const breadcrumb = to.meta.breadcrumb
            const orName = this.authorityRouteNames.indexOf(toName)
            // 左侧导航选中状态
            if (orName !== -1) {
                this.$store.dispatch('changeNav', toName)
            } else {
                const _toNameArrs = toName.split('.')
                const lg = _toNameArrs.length
                if (lg > 1) {
                    selectName = _toNameArrs[0] + '.' + _toNameArrs[1]
                    this.$store.dispatch('changeNav', selectName)
                }
            }
            // 面包屑处理
            if (breadcrumb) {
                this.$store.dispatch('breadcrumbHandle', toName)
            } else {
                this.$store.dispatch('breadcrumbHandle', null)
            }
        }
    },
    computed: {
        // 权限左侧导航条对应的route-name
        authorityRouteNames () {
            return ['name']
        }
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: inherit;
}
:after,
:before {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: inherit;
}
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>
